<!--
	作者：夏洪国
	邮箱：692681884@qq.com
	时间：2017-05-06
	描述：
-->
<!doctype html>
<html lang="en">

	<head>
		<meta charset="UTF-8" />
		<title>Document</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="../css/mui.css" />
		<style type="text/css">
			#tupian {
				width: 50px;
				height: 50px;
				background: red;
			}
			
			#tupian img {
				width: 100%;
			}
			
			#lis {
				display: flex;
			}
			
			#right {
				padding-left: 5px;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<h1 class="mui-title" style="font-weight: bold;">一些新闻</h1>
		</header>
		<!--下拉刷新容器-->
		<div id="refreshContainer" class="mui-content mui-scroll-wrapper">
			<div class="mui-scroll">
				<!--数据列表-->
				<ul class="mui-table-view mui-table-view-chevron">
					<ul id="box" class="mui-table-view" style="text-align: center;">
					</ul>
				</ul>
			</div>
		</div>

		<script src="../js/jquery.min.js"></script>
		<script src="../js/mui.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			mui.init({
				pullRefresh: {
					container: refreshContainer, //待刷新区域标识，querySelector能定位的css选择器均可，比如：id、.class等
					up: {
						height: 50, //可选.默认50.触发上拉加载拖动距离
						auto: true, //可选,默认false.自动上拉加载一次
						contentrefresh: "拼命加载中...", //可选，正在加载状态时，上拉加载控件上显示的标题内容
						contentnomore: '没有更多数据了', //可选，请求完毕若没有更多数据时显示的提醒内容；
						callback: aaa //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
					}
				}
			})

			function aaa() {
				mui.get('http://route.showapi.com/109-35', {
					//topid:5,
					showapi_appid: 36574,
					showapi_sign: '9534ab24cf1e41b49d0c4d9fe2b1a7db',
				}, function(res) {
					console.log(res);
					if(res && res.showapi_res_code == 0) {
						var data = res.showapi_res_body.pagebean.contentlist;
						for(var i = 0; i < data.length; i++) {
							var app = data[i].link;
							var li = $("<li data-href=" + app + "><div>" + data[i].title + "</div><p>" + data[i].desc + "</p></li>")
							$('#box').append(li);
						}
					}
					mui('#refreshContainer').pullRefresh().enablePullupToRefresh();
				}, 'json');
			}
			//添加点击事件
			$(function() {
				$("#box").on("click", "li", function() {
					var links = this.getAttribute("data-href");
						localStorage.setItem("link",links)
					mui.openWindow({
						url: "xiangqi.html",
						id: "xiangqing",
						styles: {
							top: 0, //新页面顶部位置
							bottom: 0, //新页面底部位置
							//							......
						},
						extras: {
							//							..... //自定义扩展参数，可以用来处理页面间传值
						},
						createNew: false, //是否重复创建同样id的webview，默认为false:不重复创建，直接显示
						show: {
							autoShow: true, //页面loaded事件发生后自动显示，默认为true
							aniShow: 'slide-in-right', //页面显示动画，默认为”slide-in-right“；
							duration: 100, //页面动画持续时间，Android平台默认100毫秒，iOS平台默认200毫秒；
							event: 'titleUpdate', //页面显示时机，默认为titleUpdate事件时显示
							extras: {} //窗口动画是否使用图片加速
						},
						waiting: {
							autoShow: true, //自动显示等待框，默认为true
							title: '正在加载...', //等待对话框上显示的提示内容
							options: {

							}
						}
					})
				})
			})
		</script>

	</body>

</html>